@baseWidth: 48px;
@baseHeight: 48px;
@basespacing: 60px;
html,
body {
  scroll-behavior: smooth;
}
.operationBallWrapper {
  position: fixed;
  right: -(@basespacing + @baseWidth);
  bottom: -@basespacing;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc((@basespacing + @baseWidth) * 2);
  height: calc((@basespacing + @baseHeight) * 2);
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  font-size: 1.5rem;
  line-height: 2rem;
  border-color: var(--background-primary);
  border-width: 2px;
  cursor: pointer;
  filter: brightness(75%);
  transition: all 0.55s cubic-bezier(0, 1.8, 1, 1.2);
  stroke-width: 0;
  .toolCommonRotate {
    transform: rotate(calc(360deg / 8 * var(--i))) !important;
  }
  .operationBall {
    position: absolute;
    left: 50%;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: @baseWidth;
    height: @baseHeight;
    margin: 0;
    padding: 0;
    color: #fff;
    font-weight: 600;
    background: linear-gradient(
      130deg,
      rgb(36, 198, 220),
      rgb(84, 51, 255) 41.07%,
      rgb(255, 0, 153) 76.05%
    );
    border-radius: 50%;
    transform: translateX(-50%);
  }
  .bottomPercentage {
    font-size: 14px;
  }
  .operationWrapper {
    position: absolute;
    left: 0;
    width: @baseWidth;
    height: @baseHeight;
    .backTop {
      :global(.ant-back-top-content) {
        z-index: 30;
        width: @baseWidth;
        height: @baseHeight;
        border-radius: 50%;
        .ant-back-top-icon {
          line-height: @baseHeight;
        }
      }
    }
    .toolCommon {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      color: #fff;
      list-style-type: none;
      background-color: red;
      border-radius: 50%;
      transform: translateX(calc(@basespacing + (@baseWidth / 2)));
      transform-origin: calc(@basespacing + @baseWidth);
      transition: 0.5s;
      transition-delay: calc(0.1s * var(--i));
      --i: 0;
      :global(.ant-back-top-content) {
        width: @baseWidth;
        height: @baseHeight;
        border-radius: 50%;
        .ant-back-top-icon {
          line-height: @baseHeight;
        }
      }
      :global(span) {
        transform: rotate(calc(360deg / -8 * var(--i)));
      }
    }
  }
}

.mySearchModalWrapper {
  background-color: #ddd;
  .searchInput {
    margin-top: 10px;
  }
  .recentlySearch {
    margin-top: 15px;
    font-weight: 700;
  }
  .searchList {
    .searchListItem {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      margin-top: 10px;
      padding: 5px 10px;
      background-color: #fff;
      border: 2px solid #fff;
      border-radius: 10px;
      cursor: pointer;
      .leftWrapper {
        display: flex;
        align-items: center;
        .titleWrapper {
          margin-left: 10px;
        }
      }
      &:hover {
        border: 2px solid #ccc;
      }
    }
  }
}
.operationBallWrapperSecret {
  right: -@basespacing;
  filter: brightness(100%);
}
